<template>
  <div>
    <div class="user">
      <div class="header bg-color acea-row row-between-wrapper">
        <div class="picTxt acea-row row-between-wrapper">
          <div class="pictrue">
            <img :src="user.avatar" />
          </div>
          <div class="text">
            <div class="acea-row row-middle">
              <div class="name line1" @click="bingGetAuth">
                {{ user.id ? user.user_nickname : "请点击授权" }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="wrapper">
        <div class="myService">
          <div class="title acea-row row-middle">我的服务</div>
          <div class="serviceList acea-row row-middle">
            <div class="item">
              <div class="pictrue">
                <img
                  src="http://datong.crmeb.net/public/uploads/attach/2019/03/28/5c9ccc9934a7c.png"
                  alt=""
                />
              </div>
              <div>会员中心</div>
            </div>
            <div class="item">
              <div class="pictrue"><img src="" alt="" /></div>
              <div>会员中心</div>
            </div>
            <div class="item">
              <div class="pictrue"><img src="" alt="" /></div>
              <div>会员中心</div>
            </div>
            <div class="item">
              <div class="pictrue"><img src="" alt="" /></div>
              <div>会员中心</div>
            </div>
            <div class="item">
              <div class="pictrue"><img src="" alt="" /></div>
              <div>会员中心</div>
            </div>
            <div class="item">
              <div class="pictrue"><img src="" alt="" /></div>
              <div>会员中心</div>
            </div>
            <div class="item">
              <div class="pictrue"><img src="" alt="" /></div>
              <div>会员中心</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {},
      user: {},
    }
  },
  mounted() {
    this.user = wx.getStorageSync("user");

    // console.log(wx.getStorageSync("user"));
    var that = this;
    wx.getSetting({
      success(res) {
        if (res.authSetting["scope.userInfo"]) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function (res) {
              that.userInfo = res.userInfo;
              console.log(res.userInfo);
            },
          });
        }
      },
      fail(){
        console.log(1)
      }
    });
 
 },
  methods: {
    bindGetuserinfo(e) {
      console.log(e.mp.detail);
    },
    bingGetAuth() {
      
      if (this.user == "") {
        console.log('aa')
        wx.navigateTo({ url: "/pages/user_login/main" });
      } else {
        console.log('bb')
      }
    },
  },
};
</script>

<style>
page {
  background-color: #f5f5f5;
}
.acea-row {
  display: flex;
  flex-wrap: wrap;
}
.acea-row.row-middle {
  align-items: center;
}
.acea-row.row-between-wrapper {
  align-items: center;
  justify-content: space-between;
}
.bg-color {
  background-color: #e93323 !important;
}
.user .header {
  padding: 0 30rpx;
  height: 190rpx;
  position: relative;
}
.user .header:after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -98rpx;
  z-index: -1;
  content: "";
  height: 100rpx;
  width: 100%;
  border-radius: 0 0 50% 50%;
  background-color: #e93323;
}
.user .header .picTxt .pictrue {
  width: 120rpx;
  height: 120rpx;
}
.user .header .picTxt .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #f5f5f5;
}
.user .header .picTxt .text {
  width: 434rpx;
  color: rgba(255, 255, 255, 1);
  margin-left: 35rpx;
}
.user .header .picTxt .text .name {
  font-size: 32rpx;
  max-width: 270rpx;
}
.user .header .picTxt .text .member {
  padding: 0 10rpx;
  height: 36rpx;
  background-color: rgba(0, 0, 0, 0.2);
  font-size: 20rpx;
  border-radius: 30rpx;
  margin-left: 17rpx;
}
.user .header .picTxt .text .member image {
  width: 28rpx;
  height: 28rpx;
  font-size: 20rpx;
  margin-right: 8rpx;
}
.user .header .picTxt .text .id {
  color: rgba(255, 255, 255, 0.6);
  font-size: 26rpx;
  margin-top: 15rpx;
}
.user .header .picTxt .text .id .iconfont {
  font-size: 30rpx;
  margin-left: 12rpx;
}
.user .header .icon-shezhi {
  font-size: 36rpx;
  color: #fff;
  margin-top: -52rpx;
}
.user .wrapper .myOrder .title,
.user .wrapper .myService .title {
  height: 88rpx;
  padding: 0 30rpx;
  border-bottom: 1px dashed #ddd;
  font-size: 30rpx;
  color: #282828;
}
.user .wrapper {
  padding: 0 20rpx;
}
.user .wrapper .myService {
  background-color: #fff;
  margin-top: 15rpx;
  border-radius: 10rpx;
}
.user .wrapper .myService .serviceList {
  padding: 8rpx 0 27rpx 0;
}
.user .wrapper .myService .serviceList .item {
  width: 25%;
  text-align: center;
  font-size: 26rpx;
  color: #333;
  margin-top: 30rpx;
}
.user .wrapper .myService .serviceList .item .pictrue {
  width: 52rpx;
  height: 52rpx;
  margin: 0 auto 16rpx auto;
}
.user .wrapper .myService .serviceList .item .pictrue image {
  width: 100%;
  height: 100%;
}
</style>